<template>
    <CommonModal v-model:show="modalShow" :title="modalTitle" @onSubmit="onSubmit" style="width: 600px">
        <n-form
        ref="modalFormRef"
        :model="modalForm"
        :inline="false"
        :rules="rules">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" label="资源类型" path="type" hidden>
          <n-select :options="remoteResourceType" v-model:value="modalForm.type">
          </n-select>
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="资源名称" path="resourceName">
          <n-input v-model:value="modalForm.resourceName" clearable placeholder="请输入资源名称"/>
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="是否公开" path="isPublic">
          <n-select :options="isPublicOption" v-model:value="modalForm.isPublic">
          </n-select>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="speechKey" path="speechKey">
          <n-input v-model:value="modalForm.speechKey" clearable placeholder="请输入speechKey"/>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="speechRegion" path="speechRegion">
          <n-input v-model:value="modalForm.speechRegion" clearable placeholder="请输入speechRegion"/>
        </n-form-item-gi>

      </n-grid>
    </n-form>
    </CommonModal>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import CommonModal from "@/components/commonModal/index.vue";
import {useCommonModal} from "@/components/commonModal/useCommonModal";
import { resourceController } from "@/api/resource/resourceController.api";
import {remoteResourceType,isPublicOption} from '@/views/resource'
export default defineComponent({
    name: "UserEditForm",
    components: {
        CommonModal,remoteResourceType,isPublicOption
    },
    setup() {
        const {
            modalShow,
            modalTitle,
            modalForm,
            modalFormRef,
            modalLoading,
            onAdd,
            onEdit,
            onSubmit,
            onDeleteById,
            onDeleteByIds
        } = useCommonModal("Azure TTS", {
                type:'AzureTTS'
            },
            resourceController.addSDResource,
            resourceController.updateResource,resourceController.deleteResource,resourceController.deleteBatch
        )


        const rules = {
            resourceName: {type: "string", required: true, message: "请输入资源名称", trigger: ["blur", "change"]},
            speechKey: {type: "string", required: true, message: "请输入speechKey", trigger: ["input", "blur"]},
            speechRegion: {type: "string", required: true, message: "请输入speechRegion", trigger: ["input", "blur"]}
        }


        return {
            modalShow,
            modalTitle,
            modalForm,
            modalFormRef,
            modalLoading,
            rules,
            remoteResourceType,
            isPublicOption,
            onAdd,
            onEdit,
            onSubmit,
            onDeleteById,
            onDeleteByIds
        }
    }
})
</script>

<style scoped>

</style>
